<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>一汽集团工业互联网平台</title>
    <base href="__APP__/index.php">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!--@style/提取各类css文件，额外引入的是和IE不兼容的相关js文件-->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" type="image/x-icon" href="/dist/img/favicon.ico">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="__PUBLIC__/static/roncoo-adminlte/plugins/bootstrap/css/bootstrap.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="__PUBLIC__/static/roncoo-adminlte/dist/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="__PUBLIC__/static/roncoo-adminlte/dist/css/ionicons.min.css">


    <!-- 以上为公共css -->
    <!--注意此处的js必须放在前面,否则系统会出现问题,因为直接跳转的页面,内部已经私用了jquery-->
    <!-- jQuery 2.2.3 -->
    <script src="__PUBLIC__/static/roncoo-adminlte/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="__PUBLIC__/static/roncoo-adminlte/plugins/bootstrap/js/bootstrap.min.js"></script>
    <style>
    	a {
			text-decoration: none;
			padding: 10px 0;
			font-size:12px;
			color:#72767a;
		}
		
		a:active, a:hover {
			text-decoration: none; /* 不显示下划线链接 */
			outline: 0;
		}
		
		a:focus {
			background-color: #000;
			outline: 0; /* 不显示选中边框 */
		}
    
    	.shadow {
    		background: #fff;
    		width: 31.33333%;
    		height:400px;
    		min-width: 300px; 
    		margin: 10px;
    		padding: 30px 20px;
    		border-radius: 0.2em;
    	}
    	
		.shadow:hover
		{
			transition: all .3s ease-in-out;
            box-shadow: 0 2px 10px rgba(0,0,0,.5);
		}
		
		.shadow:hover img.Rotation{
			transform:rotate(-20deg);
		}
		
		.shadow:hover p.detail{
			color:#000;
		}
		
		.detail{
			margin: 10px;
			font-size:16px;
			color:#72767a;
		}
		
		.topArea1{
			background:rgb(42, 48, 60); 
			color:aliceblue; 
			font-weight: lighter;
			transition: all .3s ease-in-out; 
			box-shadow: 0 2px 4px rgba(0,0,0,.5);
		}
		
		.topArea2 {
			margin: 30px 90px;
		    font-size: 16px;
		    font-weight: lighter;
		    color: darkgray;
		}
		
	</style>
    
    <script type="text/javascript" charset="utf-8">
        var now = new Date();
        $(document).ready(function () {
        	
        	// 获取参数
        	function GetQueryString(name)
        	{
        	     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        	     var r = window.location.search.substr(1).match(reg);
        	     if(r!=null)return  unescape(r[2]); return null;
        	}
        	
        	var getData = GetQueryString("n");
                getData="{$para}";
            $.getJSON("cfg/" + getData + ".json?t=" + now.getTime(), function (data) {
                // 设置主标题
                $('#title').text(data.Product.P_Title);
                // 设置概述
                $('#content').text(data.Product.P_Decs);
                // 设置特性
                var detail = $('#detail');
                if (data.Product_Features && data.Product_Features.length > 0) {
                    for (var i = 0; i < data.Product_Features.length; i++) {
                        var PF_Title = data.Product_Features[i].PF_Title;
                        var PF_Img = data.Product_Features[i].PF_Img;
                        var PT_Desc = data.Product_Features[i].PT_Desc;
                        // detail.append('<div class="col-md-4 column"><figure><img id="img1" alt="80x80" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/140/140/default.jpg" class="img-circle"/><figcaption><h2>' + date + '</h2 ><p>Donec id elit non mi porta gravida at eget metus. Fusce </p><p><a class="btn" href="#">View details »</a></p></figcaption></figure></div>');
                        detail.append('<div class="col-md-4 column shadow" >' +
                            '<img id="img1" class="Rotation" width="60px" alt="特性" src="'+ PF_Img +'"/> ' +
                            '<h4 style="color: #373d41;">' + PF_Title + '</h4><p class="detail">' + PT_Desc + '</p>' +
                            '<p style="margin: 10px;"><a href="#">查看更多 »</a></p></div>');
                        // var ol = document.createElement("ol");
                        // for (var j = 0; j < data.updateText[i].description.length; j++) {
                        //     var li = document.createElement("li");
                        //     li.innerHTML = data.updateText[i].description[j];
                        //     ol.appendChild(li);
                        // }
                        // detail.append(ol);
                        
                        
                    }
                }
            });
        });
    </script>
</head>

<body style="background: #eee;font-weight: lighter;">
    <section>
        <div class="container" style="width: 100%;">
            <div class="row clearfix">
                <!--#6487C3-->
                <div class="col-md-12 column topArea1" >
                    <h3 id="title" class="text-center" style="font-weight: lighter;">加载中……</h3>
                    <dl>
                        <dt id="content" class="text-center topArea2" >
                            加载中……
                        </dt>
                    </dl>
                </div>
            </div>
            <p></p>
            <div class="row clearfix">
                <div id="detail" style="padding: 20px 30px 0;font-weight: lighter;"></div>
            </div>
        </div>
    </section>
</body>

</html>